<template>
    <div class="container">
        <div class="article-content">
            <el-scrollbar height="100%" ref="scrollbar">
                <el-row class="el-col">
                    <ArticleCard
                            v-for="(item,index) in dataList"
                            :key="index"
                            :articleId="item.articleId"
                            :title="item.title"
                            :summary="item.summary"
                            :postTime="item.postTime"
                            :is-top="item.top"
                            :is-elite="item.elite"
                            :uid="item.user.uid"
                    >
                    </ArticleCard>
                </el-row>

            </el-scrollbar>

          <el-affix position="bottom" :offset="30">
            <div style="display: flex;flex-direction: row;background: #ffffff; opacity: 0.9;">
              <el-pagination
                  style="margin-left: 17%"
                  v-model:current-page="currentPage"
                  v-model:page-size="pageSize"
                  :page-sizes="[10, 15, 20, 30]"
                  layout="sizes, prev, pager, next, jumper"
                  v-model:total="total"
                  @size-change="handleSizeChange"
                  @current-change="handleCurrentChange"
              />
              <el-switch
                  v-model="switchValue"
                  active-text="按时间"
                  inactive-text="按热度"
                  style="--el-switch-on-color: #13ce66; --el-switch-off-color: #ff4949"
                  @change="handleSwitchChange"
              />
            </div>
          </el-affix>
        </div>
        <div class="aside">
           <AsideCard/>
        </div>
    </div>
</template>

<script setup>

import ArticleCard from "@/components/Content/cardComponents/ArticleCard.vue";
import {ref} from "vue";
import {getWithToken} from "@/net/postAndGetMethodWithToken";
import AsideCard from "@/components/Content/cardComponents/AsideCard.vue";

const currentPage = ref(1)
const dataList = ref([])
const pageSize = ref(10)
const total = ref()
const props = defineProps({
    sectorName: String,
    blockName: Number,
})


const scrollbar = ref(null)
const backToTop = () => {
    scrollbar.value.setScrollTop(0)
}

// 根据 currentPage 和 pageSize 构造请求链接
const reqLink = ref(`/api/${props.sectorName}/time?`)

const switchValue = ref(true)
getWithToken(reqLink.value + `pageNum=${currentPage.value}&pageSize=${pageSize.value}&op=${props.blockName}`, (data, code, message) => {
    dataList.value = data.list
    total.value = data.total
})
const getArticle = () => {
    getWithToken(reqLink.value + `pageNum=${currentPage.value}&pageSize=${pageSize.value}&op=${props.blockName}`, (data, code, message) => {
        dataList.value = data.list
        total.value = data.total
    })
}


function handleSwitchChange(value) {
    if (value) {
        reqLink.value = `/api/${props.sectorName}/time?`
        getArticle()
    } else {
        reqLink.value = `/api/${props.sectorName}?`
        getArticle()
    }
    backToTop()
}

const handleSizeChange = () => {
    getArticle()
    backToTop()
}
const handleCurrentChange = () => {
    getArticle()
    backToTop()
}



</script>

<style>
.container {
    flex: 1;
    display: flex;
}

.article-content {
    height: 100%;
    width: 74%;
    display: flex;
    flex-direction: column;
}

.el-col {
    display: flex;
    justify-content: flex-end;
}

.aside {
    flex: 1;
}
</style>